<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS translateX() Card Flip</title>
    <style>
        .container {
            width: 300px;
            margin: 50px auto;
        }

        .card {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            position: relative;
            transition: transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
            cursor: pointer;
            transform-style: preserve-3d;
            /* 保留3D空间 */
        }



        .front,
        .back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .front {
            background: #3498db;
            color: white;
            transform: translateX(0);
        }

        .back {
            background: #e74c3c;
            color: white;
            transform: rotateY(180deg);
        }

        .card:hover {
            transform: rotateY(180deg) translateY(60%);
        }

        .explanation {
            text-align: center;
            margin-top: 30px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 16px;
            max-width: 500px;
            margin-left: auto;
            color: tomato;
            margin-right: auto;
        }

        .explanation:hover {
            background-color: #3498db;
            color: white;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="card">
            <div class="front">正面</div>
            <div class="back">背面</div>
        </div>
    </div>

    <div class="explanation">
        <h3>实现原理</h3>
        <p>
            这个例子使用 <code>translateX()</code> 和 <code>rotateY()</code> 组合实现卡片反转效果:
        </p>
        <ol>
            <li>初始状态: 正面卡片位于中心背面卡片向左偏移并旋转180度</li>
            <li>悬停时: 卡片整体向右移动并旋转180度</li>
            <li>视觉效果: 正面卡片移出视野背面卡片移入并转正</li>
        </ol>
        <p>
            通过结合 <code>translateX</code> 和 <code>rotateY</code>可以创建出类似真实卡片翻转的效果.
        </p>
    </div>
</body>

</html>